<template>
  <div class="register">
    <div class="logo">
      <van-image
          round
          width="1rem"
          height="1rem"
          src="/imgs/logo.png"
      />
    </div>
    <van-form @submit="onSubmit">
      <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          autocomplete="off"
          :rules="[{ required: true, message: '' }]"
      />
      <van-field
          v-model="email"
          name="email"
          label="邮箱"
          placeholder="邮箱"
          autocomplete="off"
          :rules="[
                    { required: true, message: '' },
                    {validator : validatorEmail, message: '邮箱不合法'},
                    {validator : isExistEmail, message: '邮箱已被使用'},
                    ]"
      />
      <van-field
          v-model="password"
          name="password"
          label="密码"
          autocomplete="new-password"
          type="password"
          placeholder="设置新密码"
          :rules="[{ required: true, message: '' }]"
      />
      <van-field
          v-model="repassword"
          name="repassword"
          label="确认密码"
          autocomplete="new-password"
          type="password"
          placeholder="确认新密码"
          :rules="[{ required: true, message: '' }]"
      />
      <van-field
          v-model="code"
          name="code"
          center
          clearable
          label="验证码"
          autocomplete="off"
          placeholder="输入验证码"
          :rules="[{ required: true, message: '' }]"
      >
        <template #button>
          <van-button @click="getCode" size="small" type="primary">发送验证码</van-button>
        </template>
      </van-field>
      <div class="subBtns">
        <van-button round block type="danger" native-type="submit">注册</van-button>
        <van-button @click="goLogin" class="no-border" round block type="primary" plain>登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import {ref,reactive,toRefs} from "vue";
import {useRouter} from "vue-router";
import {register,emailIsValidate,getEmailCode} from "../api/user";
import validator from 'validator'
import {Notify} from "vant";
const router = useRouter()
const state = reactive({
  username:'',
  password:'',
  repassword:'',
  code:'',
  email:''
})
let {username,password,repassword,code,email} = toRefs(state)
const validatorEmail = (value)=>{
  return validator.isEmail(value)
}
const isExistEmail =async (value,rules)=>{
  console.log(value,rules)
  let response = await emailIsValidate(value)
}
const getCode = async ()=>{
  let response = await getEmailCode(email.value)
  if (response.statusCode == 200){
    Notify({ type: 'primary', message: "验证码发送成功",duration:800});
  }

}
const onSubmit = async(values) =>{
  console.log(values)
  let registerInfo = {
    email:values.email,
    username:values.username,
    password:values.password,
    password2:values.password2,
    code:values.code
  }
  let response = await register(registerInfo)
   router.push('/login')
}

const goLogin =()=>{
  router.push('/login')
}
</script>

<style scoped lang="less">
.register {
  height: 100vh;
  background-color: #fff;
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3rem;
  }
  .subBtns {
    margin: 0.32rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .no-border {
      border: none;
      color: #999;
    }
    .van-button {
      width: 5rem;
      margin-bottom: 0.1rem;
    }
  }
}
</style>
